<template>
  <div>
    <breadcrumb></breadcrumb>
    <!-- 分割线 -->
    <el-divider content-position="left">修改信息</el-divider>
    <el-form  :model="form" :rules="rules" ref="form" label-width="150px" label-position="left" class="demo-ruleForm" >
      <div style="display: flex" v-if="this.$store.state.utype == 2">
         <el-form-item label="店铺管理员名称" prop="uname"  style="margin-right: 10px;">
              <el-input v-model="form.uname" ></el-input>
          </el-form-item>
          <el-form-item label="店铺管理员手机号" prop="phone" style="margin-right: 10px;">
              <el-input  v-model="form.phone" ></el-input>
          </el-form-item>
          <el-form-item label="店铺管理初始密码" prop="upwd">
              <el-input v-model="form.upwd" ></el-input>
          </el-form-item>
      </div>
      <div style="display: flex">
        <el-form-item label="店铺名称" prop="Chinese"  style="margin-right: 10px;">
              <el-input v-model="form.Chinese" ></el-input>
          </el-form-item>
         <el-form-item label="英文名称" prop="English_name"  style="margin-right: 10px;">
              <el-input v-model="form.English_name" ></el-input>
          </el-form-item>
      </div>
      <div style="display: flex">
          <el-form-item label="店铺电话号" prop="TEL"  style="margin-right: 10px;">
              <el-input  v-model="form.TEL" ></el-input>
          </el-form-item>
          <el-form-item label="店铺营业时间" prop="time">
              <el-input v-model="form.time" ></el-input>
          </el-form-item>
      </div>
      <el-form-item label="上传店铺图片">
        <el-upload
          action="http://localhost:9000/upload"
          list-type="picture-card"
          :limit ="1"
          :on-exceed="handleExceed"
          :on-success="uploadVoucherSuccess"
          :before-upload="beforeVoucherUpload">
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog >
          <img width="100%" :src="form.img" alt="">
        </el-dialog>
      </el-form-item>
      <el-form-item label="选择位置">
          <div id="main" style="border:1px solid #444; width:100%; height:200px;"></div>
      </el-form-item>
      <el-form-item label="详细地址" prop="address">
          <el-input style="width:30%;" v-model="form.address" ></el-input>
      </el-form-item>
      <el-form-item label="省份" prop="province">
          <el-input style="width:30%;" v-model="form.province" ></el-input>
      </el-form-item>
      <el-form-item label="城市" prop="city">
          <el-input style="width:30%;" v-model="form.city" ></el-input>
      </el-form-item>
      <el-form-item label="地区" prop="district">
          <el-input style="width:30%;" v-model="form.district" ></el-input>
      </el-form-item>
      <el-form-item label="经度" prop="longitude">
          <el-input style="width:30%;" v-model="form.longitude" ></el-input>
      </el-form-item>
      <el-form-item label="纬度" prop="latitude">
          <el-input style="width:30%;" v-model="form.latitude" ></el-input>
      </el-form-item>
      <el-form-item>
          <el-button type="primary" @click="Onsubmit" >立即修改</el-button>
          <el-button @click="resetForm('form')">取消</el-button>
      </el-form-item>
      </el-form>
      
  </div>
</template>

<script>
import breadcrumb from "../components/breadcrumb.vue";
import AMapLoader from '@amap/amap-jsapi-loader';
import httpApi from '@/http';
window._AMapSecurityConfig = {
          securityJsCode:'28ac2940269eb079ba5ba8568eb907be',
      }
  export default {
    components: { breadcrumb},
      data(){
          return{
              // 表单内容
              form:{
                  type:this.$store.state.utype,
                  uid:'',
                  uname:'',
                  Chinese:'',
                  English_name:'',
                  TEL:'',
                  time:'',
                  phone:'',
                  upwd:'',
                  address:'',
                  province:'',
                  city:'',
                  district:'',
                  longitude:'',
                  latitude:'',
                  img:'',
              },
              // 验证表单
              rules:{
                   Chinese:[ { required: true, message: '必填', trigger: 'blur' }],
                   uname:[ { required: true, message: '必填', trigger: 'blur' }],
                   English_name:[ { required: true, message: '必填', trigger: 'blur' }],
                   TEL:[ { required: true, message: '必填', trigger: 'blur' }],
                   time:[ { required: true, message: '必填', trigger: 'blur' }],
                  phone:[ 
                    { required: true, message: "必填", trigger: "blur" },
                    // { pattern: /^1[3-9]\d{9}$/, message: "手机号错误", trigger: "blur" },
                  ],
                  upwd:[ { required: true, message: '必填', trigger: 'blur' }],
                  address:[ { required: true, message: '必填', trigger: 'blur' }],
                  province:[ { required: true, message: '必填', trigger: 'blur' }],
                  city:[ { required: true, message: '必填', trigger: 'blur' }],
                  district:[ { required: true, message: '必填', trigger: 'blur' }],
                  longitude:[ { required: true, message: '必填', trigger: 'blur' }],
                  latitude:[ { required: true, message: '必填', trigger: 'blur' }],
                  img:[ { required: true, message: '必填', trigger: 'blur' }],
              },
          }
      },
      methods: {
        // 上传
        handleExceed(files, fileList) {
          this.$message.warning(`当前限制选择 1个图片，共选择了 ${files.length + fileList.length} 个图片,需商品已上传图片重新上传`);
        },
        // 处理上传之前的格式大小验证
        beforeVoucherUpload(file) {
          const isJPG = file.type === 'image/jpeg';
          const isLt2M = file.size / 1024 / 1024 < 2;
          if (!isJPG) {
            this.$message.error('上传图片只能是 JPG 格式!');
          }
          if (!isLt2M) {
            this.$message.error('上传大小不能超过 2MB!');
          }
          return isJPG && isLt2M;
        },
        // 上传成功
        uploadVoucherSuccess(res, file) {
          console.log(res,"上传")
          // 将上传成功后的图片访问路径，存入form对象
          // this.urls.push( res.data )
          // console.log(this.urls,"数量");
          if(res.msg === 'ok' && res.code === 200){
            this.form.img = res.data
          }else{
            this.form.img = null
          }
          console.log( this.form.img);
        },
        // 初始-回填
        detailslist(){
          // 判断
          // console.log(this.$route.name);
          let params = {}
          if(this.$route.name === '/home/shopRevise'){
             params = {store_id:this.$route.params.id ,type:this.$store.state.utype}
          }else {
             params = {store_id:this.$store.state.uid, type:this.$store.state.utype}
          }
          httpApi.storeApi.queryStoreDetailsById(params).then(res =>{
            console.log("详情",res);
            this.form.address= res.data.data.address;
            this.form.city =res.data.data.city;
            this.form.province = res.data.data.province;
            this.form.district = res.data.data.district;
            this.form.longitude = res.data.data.longitude;
            this.form.latitude = res.data.data.latitude;
            this.form.Chinese = res.data.data.Chinese
            this.form.English_name = res.data.data.English_name
            this.form.TEL = res.data.data.TEL
            this.form.phone = res.data.data.phone
            this.form.upwd = res.data.data.upwd
            this.form.time = res.data.data.time
            this.form.uname = res.data.data.uname
            this.form.img = res.data.data.img
          })
          // 初始化地图显示
          this.initMap()
        },

          // 提交表单
          Onsubmit(){
            // console.log(this.form,'添加店铺');
              this.$refs['form'].validate(valid=>{
                if (valid) {
                  // 判断
                  if(this.$route.name === '/home/shopRevise'){
                    this.form.uid = this.$route.params.id
                  }else {
                    this.form.uid = this.$store.state.uid
                  }
                  httpApi.storeApi.queryStoreRevise(this.form).then(res =>{
                    if(res.data.code == '200'){
                      this.$message({
                        message: '恭喜你，修改店铺成功',
                        type: 'success'
                      });
                      // 跳转到店铺表页：/home/shop-list
                      if(this.$route.name === '/home/shopRevise'){
                        this.$router.push(`/home/shop-list`)
                      }else {
                        this.$router.push(`/home/shop-details/${this.$store.state.uid}`)
                      }
                    }        
                  })
                } else {
                    this.$message({
                        showClose: true,
                        message: '修改失败',
                        type: 'error'
                    });
                  }
              });
          },
          // 初始化地图
          initMap() {  
              AMapLoader.load({
                  key:"d666a21d4d3f2c43ab2f67fef19a9531",   // 申请好的Web端开发者Key，首次调用 load 时必填
                  version:"2.0",  // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                  plugins:['AMap.Geocoder','AMap.Marker'],    // 需要使用的的插件列表，如比例尺'AMap.Scale'等
              }).then(AMap=>{
                  this.map = new AMap.Map("main",{  //设置地图容器id
                      viewMode:"3D",    //是否为3D地图模式
                      zoom:12,           //初始化地图级别
                      center:[105.602725,37.076636], //初始化地图中心点位置
                  });
                  // 地图初始化完成后，为地图绑定点击事件，获取经纬度
                 this.map.on('click', (ev)=>{
                      // 触发事件的地理坐标，AMap.LngLat 类型
                      let { lng, lat} = ev.lnglat
                      console.log( `${ lng},${lat} `);
                      // 当获取用户选中的坐标点后，执行逆地址解析，得到地点的详细描述
                      var geocoder = new AMap.Geocoder()
                      geocoder.getAddress([lng, lat], (status, result)=> {
                          // result为对应的地理位置详细信息
                          // console.log(result);
                          // 表单回填
                          let info = result.regeocode;
                          this.form.address= info.formattedAddress;
                          this.form.city = info.addressComponent.city;
                          this.form.province = info.addressComponent.province;
                          this.form.district = info.addressComponent.district;
                          this.form.longitude = lng;
                          this.form.latitude = lat;
                          // 增添标记
                          var marker = new AMap.Marker({
                              // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                              position: new AMap.LngLat(lng,lat),   
                          })
                          // 移除已创建的 marker
                          this.map.remove(marker);
                          // 将创建的点标记添加到已有的地图实例：
                          this.map.add(marker); 
                                                     
                      })
                 }) 
                      
              })
          },

      
      },

      mounted(){
        //  回填
        this.detailslist()
       
       
      }
              

       
  }
</script>

<style lang="scss" scoped>
// .el-form-item {

// display: inline-block !important;

// }
</style>